<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="__PUBLIC__/asset/lib/swiper/swiper-bundle.min.css" />
    <style>
        /* banner */
        @keyframes infoInto {
            0% {
                opacity: 0.2;
                transform: translateY(100%);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes infoOut {
            0% {
                opacity: 1;
                transform: translateY(0%);
            }

            100% {
                opacity: 0.2;
                transform: translateY(100%);
            }
        }

        /* 头部swiper */
        .platform-banner {
            width: 100%;
            height: 60vh;
            overflow: hidden;
        }

        .platform-banner-swiper {
            width: 100%;
            height: 60vh;
            position: relative;
            display: none;
        }

        .platform-banner-swiper .swiper-wrapper,
        .platform-banner-swiper .swiper-slide {
            width: inherit;
            height: inherit;
        }

        .platform-banner-swiper .swiper-slide {
            overflow: hidden;
        }

        .platform-banner-swiper .swiper-slide>img {
            min-width: 100%;
            min-height: 60vh;
            object-fit: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .swiper-slide-info {
            position: absolute;
            top: 20%;
            left: 15%;
            width: 40%;
        }

        .slide-info-title {
            font-size: calc(28px + 1vw);
        }

        .slide-info-sec {
            margin: 10px 0;
            font-size: calc(22px + 0.1vw);
            font-weight: 500;
            min-height: 8vh;
        }

        .slide-info-btn {
            width: 25%;
            display: block;
        }

        .slide-info-btn img {
            width: 100%;
            margin-left: 10px;
        }

        /* 按钮 */
        .mySwiper-button {
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            height: 4px;
            display: flex;
            align-items: flex-end;
            z-index: 10;
        }

        .mySwiper-button .swiper-button-next::after,
        .mySwiper-button .swiper-button-prev::after {
            display: none;
        }

        .mySwiper-button .swiper-button-prev,
        .mySwiper-button .swiper-button-next {
            position: relative;
            display: block;
            top: 0;
            left: 0;
            width: fit-content;
            height: 4px;
        }

        .mySwiper-button .swiper-button-prev i,
        .mySwiper-button .swiper-button-next i {
            font-size: 50px;
            line-height: 4px;
            height: 4px;
            display: inline-block;
            color: var(--themeColor);
        }

        .mySwiper-button .swiper-button-prev {
            transform: rotate(180deg);
        }

        .mySwiper-button .swiper-button-pagination .swiper-pagination {
            position: relative;
            top: 0;
            left: 0;
            width: 20vw;
            display: flex;
            padding: 0 20px;
            justify-content: center;
        }

        .mySwiper-button .swiper-pagination .swiper-pagination-bullet {
            width: 30%;
            height: 4px;
            border-radius: 0;
            display: block;
            position: relative;
            top: 0;
        }

        .mySwiper-button .swiper-pagination-bullet {
            background-color: var(--themeColor);
        }

        .blue-btn,
        .red-btn,
        .origin-btn {
            font-size: calc(18px + 0.1vw);
            width: 100%;
            border-radius: 50px;
            padding: 2px 0;
            border: 1px #e50112;
            color: white;
            background-color: #e50112;
            text-align: center;
        }

        .blue-btn {
            background-color: #0571ff;
            color: white;

        }

        .origin-btn {
            background-color: #fe6a00;
            color: white;
        }

        .swiper-slide-active .swiper-slide-info {
            animation: infoInto .8s;
        }

        .swiper-slide-prev .swiper-slide-info {
            animation: infoOut .8s;
        }

        @media screen and (min-width:1600px) {
            .slide-info-btn {
                width: 22%;
            }
        }

        @media screen and (min-width:768px) and (max-width:1400px) {
            .slide-info-title {
                font-size: calc(38px + 0.1vw);
            }

            .swiper-slide-info {
                position: absolute;
                top: 20%;
                left: 10%;
                width: 40%;
            }
        }

        @media screen and (max-width:768px) {

            .blue-btn,
            .red-btn,
            .origin-btn {
                font-size: calc(14px + 0.1vw);
            }

            .platform-banner,
            .platform-banner-swiper {
                height: 49.8vh;
            }

            .swiper-slide-info {
                position: absolute;
                top: 10%;
                left: 10%;
                width: 80%;
            }

            .slide-info-title {
                font-size: calc(28px + 0.1vw);
            }

            .slide-info-sec {
                margin: 10px 0;
                font-size: calc(16px + 0.1vw);
                font-weight: 500;
                min-height: 8vh;
            }

            .slide-info-btn {
                width: 30%;
            }

            .mySwiper-button .swiper-button-pagination .swiper-pagination {
                width: 50vw;
            }
        }
    </style>
</head>

<body>
    <!-- 轮播图 -->
    <div class="platform-banner wow fadeInUp">
        <!-- 平台-aws -->
        <div class="platform-banner-swiper aws-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/aws/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_1')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_2')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/aws/banner2.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_3')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_4')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/aws/banner3.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_5')}<br>{:L('swiper_6')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_7')}<br>{:L('swiper_8')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mySwiper-button">
                <div class="swiper-button-next">
                    <i class="iconfont icon-jiang"></i>
                </div>
                <div class="swiper-button-pagination">
                    <div class="swiper-pagination"></div>
                </div>

                <div class="swiper-button-prev">
                    <i class="iconfont icon-jiang"></i>
                </div>
            </div>
        </div>
        <!-- 云加速-aws -->
        <div class="platform-banner-swiper aws-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/aws/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_9')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_10')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper ali-wrapper">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/ali/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_11')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_12')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon ali-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/ali/banner2.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_13')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_14')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon ali-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/ali/banner3.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_15')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_16')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon ali-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mySwiper-button">
                <div class="swiper-button-next">
                    <i class="iconfont icon-jiang"></i>
                </div>
                <div class="swiper-button-pagination">
                    <div class="swiper-pagination"></div>
                </div>

                <div class="swiper-button-prev">
                    <i class="iconfont icon-jiang"></i>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper ali-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/ali/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_17')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_18')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon ali-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper google-wrapper">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/google/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_19')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_20')}<br>{:L('swiper_21')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon google-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/google/banner2.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_22')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_23')}<br>{:L('swiper_24')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon google-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mySwiper-button">
                <div class="swiper-button-next">
                    <i class="iconfont icon-jiang"></i>
                </div>
                <div class="swiper-button-pagination">
                    <div class="swiper-pagination"></div>
                </div>

                <div class="swiper-button-prev">
                    <i class="iconfont icon-jiang"></i>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper google-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/google/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_25')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_26')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon google-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper huawei-wrapper">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/huawei/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_27')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_28')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon huawei-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/huawei/banner2.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_29')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_30')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon huawei-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/huawei/banner3.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_31')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_32')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon huawei-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mySwiper-button">
                <div class="swiper-button-next">
                    <i class="iconfont icon-jiang"></i>
                </div>
                <div class="swiper-button-pagination">
                    <div class="swiper-pagination"></div>
                </div>

                <div class="swiper-button-prev">
                    <i class="iconfont icon-jiang"></i>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper huawei-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/huawei/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_33')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_34')}<br>{:L('swiper_35')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon huawei-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper tenxun-wrapper">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/tenxun/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_36')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_37')}<br>{:L('swiper_38')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/tenxun/banner2.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_39')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_40')}<br>{:L('swiper_41')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/tenxun/banner3.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_42')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_43')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mySwiper-button">
                <div class="swiper-button-next">
                    <i class="iconfont icon-jiang"></i>
                </div>
                <div class="swiper-button-pagination">
                    <div class="swiper-pagination"></div>
                </div>

                <div class="swiper-button-prev">
                    <i class="iconfont icon-jiang"></i>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper tenxun-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/tenxun/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_44')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_45')}<br>{:L('swiper_46')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper microsoft-wrapper">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/microsoft/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_47')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_48')}<br>
                            {:L('swiper_49')}<br>
                            {:L('swiper_50')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper microsoft-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/microsoft/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_51')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_52')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper safety-wrapper">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/safety/banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title" style="color: white;">
                            {:L('swiper_53')}
                        </div>
                        <div class="slide-info-sec" style="color: white;">
                            {:L('swiper_54')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon safety-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="platform-banner-swiper safety-clound-wrapper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="__PUBLIC__/asset/image/platform/safety/clound-banner.jpg" alt="">
                    <div class="swiper-slide-info" data-wow-delay="0.3s">
                        <div class="slide-info-title">
                            {:L('swiper_55')}
                        </div>
                        <div class="slide-info-sec">
                            {:L('swiper_56')}<br>
                            {:L('swiper_57')}
                        </div>
                        <a class="slide-info-btn" href="#">
                            <i class="iconfont icon-youjiantou- frist-icon safety-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__PUBLIC__/asset/lib/swiper/swiper-bundle.min.js"></script>
    <script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
    <script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
    <script>
        let pathInfo = location.pathname == '/' ? null : location.pathname.match(/\/[a-zA-Z0-9\-]+/g)
        pathInfo = pathInfo[0].split('-');

        let nowPath = pathInfo[0]
        let nowType = pathInfo.length > 1 ? pathInfo[1] : ''
        // 顶部轮播图

        var platformSwiper = null
        // 处理当前应该显示的banner
        function initSwiper(swiperName) {
            platformSwiper = new Swiper(`.${swiperName}`, {
                navigation: {
                    nextEl: '.swiper-button-prev',
                    prevEl: '.swiper-button-next',
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        }

        if (nowType) {
            nowType = nowType.replace('/', '').replace('cloud', '').replace('.html', '')

            let pathKeys = {
                'aws': 'aws',
                'alibaba': 'ali',
                'google': 'google',
                'huawei': 'huawei',
                'tencent': 'tenxun',
                'azure': 'microsoft',
                'flare': 'safety'
            }
            let swiperName = pathKeys[nowType] + (nowPath.includes('cdn') ? '-clound' : '') + '-wrapper'
            console.log('swiperName', swiperName);

            $('.platform-banner-swiper').each(function () {
                if ($(this).hasClass(swiperName)) {
                    $(this).css('display', 'block')
                    initSwiper(swiperName)
                }
            })
        }
    </script>
</body>

</html>